import React from 'react';
import Logo from '../../components/logo/logo';
import { List, InputItem, Radio, WingBlank, WhiteSpace, Button } from 'antd-mobile';
import { connect } from 'react-redux';
import { register } from '../../redux/user.redux';

@connect(
    state => state.user,//取user-redux信息
    { register }
)

class Register extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: '',
            pwd: '',
            repeatpwd: '',
            type: 'genius'
        }
        this.handleRegister = this.handleRegister.bind(this);//将this传入函数
    }
    handleChange(key, val) {
        this.setState({
            [key]: val
        })
    }
    handleRegister() {
        this.props.register(this.state);
        console.log(this.state);
    }
    render() {
        const RadioItem = Radio.RadioItem;
        return (
            <div>
                <Logo></Logo>
                {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
                <InputItem
                    onChange={v=>this.handleChange('user', v)}
                >用户名</InputItem>
                <WhiteSpace />
                <InputItem
                     onChange={v=>this.handleChange('pwd', v)}
                     type='password'
                >密码</InputItem>
                <WhiteSpace />
                <InputItem
                     onChange={v=>this.handleChange('repeatpwd', v)}
                     type='password'
                >确认密码</InputItem>
                <WhiteSpace />
                <RadioItem
                    checked={this.state.type==='genius'}
                    onClick={()=>this.handleChange('type', 'genius')}
                >作者</RadioItem>
                <RadioItem
                    checked={this.state.type==='boss'}
                    onClick={()=>this.handleChange('type', 'boss')}
                >读者</RadioItem>
                <WhiteSpace />
                <Button type="primary" onClick={this.handleRegister}>注册</Button>
            </div>
        )
    }
}

export default Register;